<template>
  <div class="profit-statement">
    <!-- 筛选区 -->
    <div class="filter-bar">
      <el-date-picker
        v-model="filter.dateRange"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="YYYY-MM-DD"
        :default-value="[new Date('2025-06-01'), new Date('2025-06-26')]"
        style="margin-right: 16px"
      />
      <el-button type="primary" @click="queryData">查询</el-button>
      <el-button type="success" @click="exportData" style="margin-left: 8px"
        >导出</el-button
      >
      <el-button type="info" @click="printData" style="margin-left: 8px"
        >打印</el-button
      >
    </div>

    <!-- 报表标题 & 日期 -->
    <div class="statement-header">
      <h3>利润表</h3>
      <p>日期: {{ filter.dateRange[0] }} 至 {{ filter.dateRange[1] }}</p>
    </div>

    <!-- 空状态 -->
    <div class="empty-state" v-if="!tableData.length">
      <i class="el-icon-document" style="font-size: 48px; color: #dcdcdc"></i>
      <p>暂无数据，点击查询生成利润表</p>
    </div>

    <!-- 利润表表格 -->
    <el-table
      v-else
      :data="tableData"
      border
      style="width: 100%; margin-top: 16px"
      :header-cell-style="{ background: '#F8F9FA' }"
      :row-class-name="getRowClass"
    >
      <el-table-column label="项目" min-width="220" prop="item" />
      <el-table-column label="行次" prop="row" width="80" align="center" />
      <el-table-column label="金额" prop="amount" width="120" align="right" />
    </el-table>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";

// ========== 筛选条件 ==========
const filter = reactive({
  dateRange: [new Date("2025-06-01"), new Date("2025-06-26")],
});

// ========== 利润表数据 ==========
const tableData = ref([]);

// 预定义利润表结构（项目、行次、层级）
const profitStructure = [
  { level: 1, item: "主营业务", row: 1, amount: 0 },
  { level: 2, item: "销售收入", row: 2, amount: 0 },
  { level: 2, item: "减: 销售优惠金额", row: 3, amount: 0 },
  { level: 2, item: "减: 收款折扣", row: 4, amount: 0 },
  { level: 2, item: "", row: 5, amount: 0 }, // 空行
  { level: 2, item: "销售成本", row: 6, amount: 0 },
  { level: 2, item: "减: 购货优惠金额", row: 7, amount: 0 },
  { level: 2, item: "减: 付款折扣", row: 8, amount: 0 },
  { level: 2, item: "", row: 9, amount: 0 }, // 空行
  { level: 2, item: "盘盈盘亏", row: 10, amount: 0 },
  { level: 2, item: "", row: 11, amount: 0 }, // 空行
  { level: 1, item: "主营业务利润", row: 12, amount: 0 },
  { level: 2, item: "", row: 13, amount: 0 }, // 空行
  { level: 1, item: "其它业务利润", row: 14, amount: 0 },
  { level: 1, item: "净利润", row: 15, amount: 0, isTotal: true },
];

// ========== 核心逻辑 ==========
/** 查询利润表（模拟计算） */
const queryData = () => {
  // 1. 深拷贝结构（避免修改原始数据）
  const data = JSON.parse(JSON.stringify(profitStructure));

  // 2. 模拟赋值基础数据（实际从接口获取）
  data.find((item) => item.item === "销售收入").amount = 150000.0;
  data.find((item) => item.item === "减: 销售优惠金额").amount = 8000.0;
  data.find((item) => item.item === "减: 收款折扣").amount = 5000.0;
  data.find((item) => item.item === "销售成本").amount = 80000.0;
  data.find((item) => item.item === "减: 购货优惠金额").amount = 3000.0;
  data.find((item) => item.item === "减: 付款折扣").amount = 2000.0;
  data.find((item) => item.item === "盘盈盘亏").amount = -1500.0; // 盘亏为负
  data.find((item) => item.item === "其它业务利润").amount = 25000.0;

  // 3. 计算主营业务利润
  const salesIncome = data.find((i) => i.item === "销售收入").amount;
  const salesDiscount = data.find((i) => i.item === "减: 销售优惠金额").amount;
  const receiptDiscount = data.find((i) => i.item === "减: 收款折扣").amount;
  const cost = data.find((i) => i.item === "销售成本").amount;
  const purchaseDiscount = data.find(
    (i) => i.item === "减: 购货优惠金额"
  ).amount;
  const paymentDiscount = data.find((i) => i.item === "减: 付款折扣").amount;
  const inventoryPL = data.find((i) => i.item === "盘盈盘亏").amount;

  const mainProfit =
    salesIncome -
    salesDiscount -
    receiptDiscount -
    cost +
    purchaseDiscount +
    paymentDiscount -
    inventoryPL;

  data.find((item) => item.item === "主营业务利润").amount = mainProfit;

  // 4. 计算净利润（主营业务利润 + 其它业务利润）
  const otherProfit = data.find((i) => i.item === "其它业务利润").amount;
  data.find((item) => item.item === "净利润").amount = mainProfit + otherProfit;

  tableData.value = data;
  ElMessage.success("利润表计算完成！");
};

/** 获取行样式类 */
const getRowClass = ({ row }) => {
  return `level-${row.level}`;
};

/** 导出功能（模拟） */
const exportData = () => {
  if (!tableData.value.length) {
    ElMessage.warning("请先查询利润表！");
    return;
  }
  ElMessage.info("模拟导出利润表（可扩展真实导出逻辑）...");
};

/** 打印功能（模拟） */
const printData = () => {
  if (!tableData.value.length) {
    ElMessage.warning("请先查询利润表！");
    return;
  }
  ElMessage.info("模拟打印利润表（可扩展真实打印逻辑）...");
};
</script>

<style scoped>
.profit-statement {
  padding: 24px;
  background: #fff;
}

.filter-bar {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.statement-header {
  margin: 8px 0;
}
.statement-header h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0;
  color: #999;
}

/* 项目缩进和加粗样式 */
.el-table .cell {
  display: inline-block;
  padding-left: calc(var(--indent, 0) * 1px);
  font-weight: var(--font-weight, normal);
}

/* 一级项目样式 */
.el-table .cell.level-1 {
  --indent: 0;
  --font-weight: bold;
}

/* 二级项目样式 */
.el-table .cell.level-2 {
  --indent: 16;
  --font-weight: normal;
}

/* 合计行（净利润）样式 */
.el-table__row:nth-last-of-type(1) td {
  background-color: #fff2cc !important;
  font-weight: 500;
}
</style>